<template>
  <div class="flex">
    <CssInput v-model="name" :options="options" class="w45%" />:<CssInput v-model="value" :options="valueOptions" class="w45%" />
  </div>
</template>
<script setup lang="ts">
  import CssInput from './CssInput.vue';
  import { computed } from 'vue';
  import { options } from '..';
  
  const name = defineModel('name')
  const value = defineModel('value')

  const valueOptions = computed(() => {
    if(!name.value) return []

    const item = options.find(e => e.value === name.value)
    if(!item) return []

    return item.options || []
  })
</script>